<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //1.交换变量的值
        //使用解构赋值可以方便地交换两个变量的值，而无需借助临时变量。
        // let a = 1;
        // let b = 2;
        // [a, b] = [b, a];
        // console.log(a);
        // console.log(b);

        //2.从对象中提取属性
        //解构赋值可以从对象中提取属性值并赋值给变量。
        // const user = {
        //     name: '霍君',
        //     age: 38,
        //     city: 'nan chang'
        // }
        // const { name, age } = user
        // console.log(name);
        // console.log(age);

        //3.函数参数的解构赋值
        //函数参数可以使用解构赋值来直接提取对象属性，避免手动提取。
        // function greet({ name, age }) {
        //     console.log(`你好，我的名字是${name}我今年${age}岁啦`);
        // }
        // const user = {
        //     name: '霍君',
        //     age: 38
        // }
        // greet(user)

        //4.处理嵌套对象
        //解构赋值可以处理嵌套对象，从而提取内部属性。
        // const person = {
        //     name: '霍君',
        //     address: {
        //         city: 'nan chang',
        //         conuntry: 'china'
        //     }
        // };
        // const { address: { city,conuntry } } = person;
        // console.log(city);
        // console.log(conuntry);

        //5.数组解构赋值
        //可以使用解构赋值从数组中提取元素值。
        // const fruits=['apple','banana','cherry'];
        // const [first,second]=fruits;
        // console.log(first);
        // console.log(second);

        //6.默认值
        //解构赋值时可以为变量设置默认值，以防止属性缺失。
        // const user={
        //     name:'霍君'
        // };
        // const {name,age=38}=user
        // console.log(name);
        // console.log(age);

        //7.提取剩余元素
        //使用解构赋值时可以提取数组或对象中剩余的元素。
        // const colors=['red','green','blue','yellow'];
        // const[primary,secondary,...others]=colors;
        // console.log(primary);
        // console.log(secondary);
        // console.log(others);

        //8.嵌套解构赋值
        //解构赋值支持在对象和数组中同时使用，处理复杂的数据结构
        // const user={
        //     name:'霍君',
        //     hobbies:['小黄书','春风精灵']
        // };
        // const {
        //     name,
        //     hobbies:[firstHobby,secondHobby]
        // }=user;
        // console.log(name);
        // console.log(firstHobby);
        // console.log(secondHobby);

        //9.解构赋值与函数返回值
        //解构赋值可以方便地处理函数的返回值，尤其是当函数返回多个值时。
        // function getCoordinates() {
        //     return [40.7128, -74.0060]
        // }
        // const [latitude, longitude] = getCoordinates();
        // console.log(latitude);
        // console.log(longitude);

        //10.在循环中使用解构赋值
        //解构赋值可以在循环中用于处理数组或对象。
        // const people=[
        //     {name:'小霍君',age:38},
        //     {name:'霍君',age:438},
        //     {name:'老霍君',age:9438}
        // ];
        // for(const{name,age}of people){
        //     console.log(`我是${name}今年${age}岁啦`);
        // }











    </script>
</body>

</html>